<template>
  <div class="box">
    <Top til="榜单" :isIcon="false"></Top>
    <router-link class="search" to="/find">搜索</router-link>
    <div v-for="item in topList" :key="item.id">
      <router-link class="list" :to="'/detail/' + item.id">
        <img :src="item.coverImgUrl" alt="" />
        <ul>
          <li v-for="(music, i) in item.tracks" :key="i">
            <span style="margin-right: 10px">{{ i + 1 }}</span>
            <span>{{ music.first }}</span>
            
            <span>{{ music.second }}</span>
          </li>
        </ul>
      </router-link>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      topList: [],
    };
  },
  methods: {
    async getTopList() {
      let res = await axios.get("http://localhost:3000/toplist/detail");
      console.log(res, "toplist");
      this.topList = res.data.list.filter((item) => item.tracks.length);
    },
  },
  created() {
    this.getTopList();
  },
};


// import axios from "axios";

// export default {
//   data() {
//     return {
//       topList: [],
//     };
//   },
//   methods: {
//     async getTopList() {
//       try {
//         const res = await axios.get("https://binaryify.github.io/NeteaseCloudMusicApi/#/?id=%e5%8f%91%e9%80%81%e9%aa%8c%e8%af%81%e7%a0%81");
//         if (res && res.data && res.data.list) {
//           this.$set(this, "topList", res.data.list.filter((item) => item.tracks && item.tracks.length));
//         } else {
//           console.error("Invalid response data");
//         }
//       wozhenshifule  shenmeyebushui daodizaixieshen  wohenshifule   zhenenglaibierenme  nizai qigning de duoluome shis s this is a
//      jinjinshichulechuhan kanqilaihaoxiang butaixing     buzhidao  zhanghxiaoyebulai  meiyoujiangxiaohua jieduanxing zongjie  shiwogenbenmeixureehuui
//       jinjinshichulechuhan kanqilaihaoxiang butaixing     buzhidao  zhanghx  iaoyebulai  meiyoujiangxiaohua jieduanxing zongjie  shiwogenbenmeixure
//       jintainyizhengtian  kansheixianshuohua xiuxizhan kongbufenji tiqianjihuahao guoyuciji ershoujia maining  yiyiguanli  yiyiguanli  yiyiguanli  yiyiguanli  yiyiguanli  
//      bubuu  bualai 
//     joke no reseate  bushi zaizhe shenmedoushishb zhngyuhang buayapdb hh
//       } catch (error) {  
//         console.error("An error occurred during the request", error);  
//       }  
//     },  
//   },  
//   created() {  
//     this.getTopList();  
//   },  
// };
</script>

<style scoped>
.list {
  display: flex;
  margin-top: 10px;
  padding: 0 10px;
  align-items: center;
  color: #787878;
  font-size: 14px;
}

.list img {
  width: 100px;
  height: 100px;
}

.list ul {
  flex: 1;
  padding: 10px;
  box-sizing: border-box;
}
.list ul li {
  padding: 4px 0;
}

.search {
  display: block;
  width: calc(100vw - 20px);
  box-sizing: border-box;
  height: 35px;
  line-height: 35px;
  padding-left: 40px;
  border-radius: 30px;
  margin: 10px auto;

  color: #787878;
  background: url(../assets/imgs/搜索.png) no-repeat 15px center #f1f1f1;
  background-size: 24px 24px;
}
</style>
